<style lang="less" scoped src="./classes.less"></style>
<script src="./classes.js"></script>
<template>
    <div>
        <div class="main-table" style="font-size: 15px;">
            <Row align="middle">
                <Col span="2">
                班级名称:
                </Col>
                <Col span="4">
                <Input v-model="query.name" style="width: 98%"></Input>
                </Col>
            </Row>
        </div>
        <div style="display: flex;justify-content:space-between;margin-top: 10px;">
            <div>
                <span @click="showAdd"><Button type="primary" icon="plus">开班申请</Button></span>
                <span @click="doDelBath"><Button type="primary" icon="close">批量删除</Button></span>
            </div>
            <div>
                <span @click="doQuery"><Button type="primary" icon="android-search">查询</Button></span>
                <span @click="query={};doQuery();"><Button type="primary" icon="refresh">重置</Button></span>
            </div>
        </div>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList" :highlight-row="true"
                   @on-selection-change="whenSelectRow"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="init"
                  show-total show-elevator></Page>
        </div>

        <Modal
                v-model="addVisible"
                width="350%"
                :loading="true"
                :draggable="true"
                :closable="true" title="开班申请" :mask-closable="false"
        >
            <Form :label-width="80" :model="formData"  ref="formData">
                <Row>
                    <Col span="20">
                    <FormItem label="班级名称:">
                        <Input type="text" v-model="formData.name"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="20">
                    <FormItem label="班级人员:">
                        <Input type="text" v-model="formData.people"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="20">
                    <FormItem label="标准费用:">
                        <Input type="text" v-model="formData.teachCost"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="20">
                    <FormItem label="负责教师:" >
                        <Select v-model="formData.mainTeacherId" >
                            <Option v-for="item in mainTeacherList" :key="item.id" :value="item.id">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>

                <!--<Row>-->
                    <!--<Col span="20">-->
                    <!--<FormItem label="课次:">-->
                        <!--<Input type="text" v-model="formData.classNo"></Input>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                <!--</Row>-->

                <!--<Row>-->
                    <!--<Col span="20">-->
                    <!--<FormItem label="课次时数:">-->
                        <!--<Input type="text" v-model="formData.classTime"></Input>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                <!--</Row>-->

                <Row>
                    <Col span="20">
                    <FormItem label="课表信息:" >
                        <Button type="primary" style="margin-left: 10px" @click="showClassSchedule" icon="plus">设置课表
                        </Button>
                        <span style="margin-left:5px;">
                            <Tag v-for="item in dataListSchedule" :key="item.id" :name="item"
                                 :closable="tagCloseableFlag" @on-close="whenCloseTag">{{item.classTimeName}}  {{item.startTime}}-{{item.endTime}} {{item.classRoom}}</Tag>
                            </span>
                    </FormItem>
                    </Col>
                </Row>



            </Form>
            <div slot="footer">
                <Button type="primary" @click="doSave('formData')">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="addVisible = false">取消</Button>
            </div>
        </Modal>

        <Modal
                v-model="scheduleVisible" title="设置课表" :mask-closable="false"
                width="60%" >
            <div style="margin-bottom: 10px;">
                <Row align="middle">
                    <Col span="2">
                    <Button @click="addRow(dataListSchedule.length)" icon="plus">添加</Button>
                    </Col>
                    <Col span="2">
                    <Button @click="bathAddClassRoomSchedule" icon="plus">批量添加</Button>
                    </Col>
                </Row>
            </div>
            <Table border :columns="columnsSchedule" :data="dataListSchedule" :highlight-row="true"></Table>
        </Modal>
        <Modal v-model="bathAddClassRoomScheduleVisible"
               title="批量设置课表"
               width="50%"
               :mask-closable="false">
            <Form :label-width="80">
                <FormItem label="上课周期:">
                    <Checkbox-group @on-change="bathAddClassOnChange" :label-in-value="true"
                                    v-model="bathAddClassRoomData.classTime" size="large"
                                    style="margin-left: 10px;">
                        <Checkbox v-for="(item,key) in weekData" :key="key" :label="item.id">
                            <span>{{item.name}}</span>
                        </Checkbox>
                    </Checkbox-group>
                </FormItem>

                <FormItem label="教室:">
                    <Input v-model="bathAddClassRoomData.classRoomName" :readonly="true" icon="search"
                           @on-click="showClassRoomSelecter"></Input>
                </FormItem>

                <FormItem label="开始时间:">
                    <TimePicker format="HH:mm" type="time" style="width: 168px;margin-left: 10px;"
                                @on-change="whenBathClassStartTimeChange"></TimePicker>
                </FormItem>

                <FormItem label="结束时间:">
                    <TimePicker format="HH:mm" type="time" style="width: 168px;margin-left: 10px;"
                                @on-change="whenBathClassEndTimeChange"></TimePicker>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="bathAddClassRoomConfirm">确认</Button>
                <Button style="margin-left: 8px" @click="bathAddClassRoomScheduleClose">关闭</Button>
            </div>
        </Modal>
        <Modal
                title="选择教室"
                v-model="classRoomVisible"
                width="60%"
                :mask-closable="false"
                @on-ok="whenSetClassRoom"
        >
            <classroomComp ref="classroomComp"></classroomComp>
        </Modal>


    </div>
</template>

